<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <span class="divider"><el-tag>订单购买信息</el-tag></span>
    <!-- 订单信息 -->
    <div class="orderInfo">
      <el-table :data="orderData.orderItems" style="width: 100%">
        <el-table-column prop="skuTitle" label="商品名称"> </el-table-column>
        <el-table-column prop="skuAttr" label="规格" width="300">
        </el-table-column>
        <el-table-column prop="quantity" label="商品数量" width="120">
        </el-table-column>
        <el-table-column prop="price" label="商品单价" width="120">
          <template slot-scope="{ row }">
            ￥{{ row.price | decimal }}
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="商品总价" width="120">
          <template slot-scope="{ row }">
            ￥{{ row.totalAmount | decimal }}
          </template>
        </el-table-column>
      </el-table>
      <div class="payAmount">
        <span
          >实付款:
          <span class="num">￥{{ orderData.payAmount | decimal }}</span></span
        >
      </div>
    </div>

    <span class="divider"><el-tag>历史申请记录</el-tag></span>
    <!-- 历史申请记录 -->
    <div class="history">
      <el-table :data="orderRefund.historyList" style="width: 100%">
        <el-table-column prop="applyReason" label="申请原因"> </el-table-column>
        <el-table-column prop="skuTitle" label="退款商品"> </el-table-column>
        <el-table-column prop="refundStatusName" label="处理进度" width="100">
          <template slot-scope="{ row }">
            <span class="red">{{ row.refundStatusName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="refundTypeName" label="退款方式" width="90">
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" width="180">
        </el-table-column>
        <el-table-column prop="payAmount" label="实付金额" width="120">
          <template slot-scope="{ row }">
            ￥{{ row.payAmount | decimal }}
          </template>
        </el-table-column>
        <el-table-column prop="refundAmount" label="退款金额" width="120">
          <template slot-scope="{ row }">
            ￥{{ row.refundAmount | decimal }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <span class="divider"><el-tag>当前申请信息</el-tag></span>
    <!-- 当前申请信息 -->
    <div
      class="current"
      v-for="(item, itemIndex) in orderRefund.currentList"
      :key="itemIndex"
    >
      <el-table :data="item" style="width: 100%">
        <el-table-column prop="applyReason" label="申请原因"> </el-table-column>
        <el-table-column prop="skuTitle" label="退款商品"> </el-table-column>
        <el-table-column prop="refundStatusName" label="处理进度" width="100">
          <template slot-scope="{ row }">
            <span class="red">{{ row.refundStatusName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="refundTypeName" label="退款方式" width="90">
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" width="180">
        </el-table-column>
        <el-table-column prop="payAmount" label="实付金额" width="120">
          <template slot-scope="{ row }">
            ￥{{ row.payAmount | decimal }}
          </template>
        </el-table-column>
        <el-table-column prop="refundAmount" label="退款金额" width="120">
          <template slot-scope="{ row }">
            ￥{{ row.refundAmount | decimal }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 审核意见 -->
      <el-form class="form" v-if="showAuditBtn(item[0])">
        <el-form-item
          label="拒绝原因"
          prop="reason"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="item[0].reason"
            type="textarea"
            :rows="3"
            placeholder="请填写拒绝原因"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="btnList" v-if="showAuditBtn(item[0])">
        <el-button @click="refuseReturn(item[0].id, itemIndex)">拒绝</el-button>
        <el-button
          type="primary"
          @click="approveReturn(item[0].id)"
          :loading="loading"
          >同意</el-button
        >
      </div>
      <div class="btnList" v-if="showReceiveBtn(item[0])">
        <el-button @click="showDialog(false)">取消</el-button>
        <el-button
          type="primary"
          @click="returnDeliveryReceive(item[0].id)"
          :loading="loading"
          >确认收货</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
import dialogMixins from "@/views/base/dialogMixins";

// 请求接口 start
import orderApi from "@/api/orderApi";
// 请求接口 end

export default {
  // 组件名称 start
  name: "orderReturn",
  // 组件名称 end
  props: ["dialogTitle"],
  mixins: [dialogMixins],
  data() {
    return {
      // 表格数据及校验规则 start
      initForm: {},
      form: {},
      orderData: {},
      orderRefund: {
        currentList: [],
        historyList: [],
      },
      rules: {},
    };
  },
  methods: {
    showAuditBtn(orderRefund) {
      return orderRefund.refundStatus == 0;
    },
    showReceiveBtn(orderRefund) {
      return orderRefund.refundStatus == 3;
    },
    // 数据详情 start
    remoteData(row) {
      orderApi.order.infoWithCascade(row.id).then((res) => {
        this.orderData = res.data;
      });
      orderApi.refund.listForAdmin(row.id).then((res) => {
        var currentList = [];
        res.data.currentList.forEach((item) => {
          currentList.push([item]);
        });
        this.orderRefund.currentList = currentList;
        this.orderRefund.historyList = res.data.historyList;
      });
    },
    // 同意
    approveReturn(id) {
      orderApi.refund
        .approveReturn(id, this.meta.repeatSubmitToken)
        .then((res) => {
          this.showDialog(false);
          this.$parent.querySearchForm();
        });
    },
    // 拒绝
    refuseReturn(id, itemIndex) {
      var reason = this.orderRefund.currentList[itemIndex][0].reason;
      if (reason == "") {
        this.$message.error("请填写拒绝原因");
        return;
      }
      orderApi.refund
        .refuseReturn({
          repeatSubmitToken: this.meta.repeatSubmitToken,
          id: id,
          reason: reason,
        })
        .then((res) => {
          this.showDialog(false);
          this.$parent.querySearchForm();
        });
    },
    // 退货收货
    returnDeliveryReceive(id) {
      orderApi.refund
        .returnDeliveryReceive(id, this.meta.repeatSubmitToken)
        .then((res) => {
          this.showDialog(false);
          this.$parent.querySearchForm();
        });
    },
  },
};
</script>

<style lang="less" scoped>
.divider {
  margin-left: 5px;
}
:deep(.el-dialog) {
  .el-dialog__body {
    padding-bottom: 50px;
  }
}
.orderInfo {
  .payAmount {
    margin: 30px 53px 0px 0px;
    display: flex;
    justify-content: flex-end;
    .num {
      color: #fa2c19;
    }
  }
}
.history {
  margin: 20px 0px 30px 0px;
}
.current {
  .btnList {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
.form {
  margin-top: 20px;
}
.red {
  color: #fa2c19;
}
</style>